/**
 * 医生卡片组件
 * 
 * 功能描述：
 * - 展示医生基本信息的卡片组件
 * - 包含医生头像、姓名、职称、医院、科室等信息
 * - 支持图文咨询、电话咨询、视频咨询等多种咨询方式
 * - 提供关注/取消关注功能
 * - 支持点击进入医生详情页面
 * 
 * 使用场景：
 * - 医生列表页面展示
 * - 搜索结果中的医生信息展示
 * - 推荐医生展示
 * 
 * 作者：系统
 * 创建时间：2024
 */

import { ChevronDown, Phone, MessageCircle, Video, Heart } from 'lucide-react';

// 内联类型定义
interface Doctor {
  id: string;
  name: string;
  title: string;
  hospital: string;
  department: string;
  avatar: string | null; // 允许为空
  isOnline: boolean;
  consultationMethods: ConsultationMethod[];
  specialties: string;
  rating: number;
  commendations: number;
  views: number;
  price: number;
  isGradeA?: boolean;
}

type ConsultationMethod = '图文咨询' | '电话咨询' | '视频咨询';

interface DoctorCardProps {
  doctor: Doctor;
  onConsult: (doctorId: string) => void;
  onDoctorClick?: (doctorId: string) => void;
  isFollowed?: boolean;
}

const consultationIconMap = {
  '图文咨询': MessageCircle,
  '电话咨询': Phone,
  '视频咨询': Video,
};

export default function DoctorCard({ doctor, onConsult, onDoctorClick, isFollowed = false }: DoctorCardProps) {
  return (
    <div className="bg-white rounded-xl shadow-sm border border-gray-100 p-4 hover:shadow-md transition-all duration-200">
      <div className="flex space-x-4">
        {/* 医生头像 */}
        <div 
          className="relative cursor-pointer flex-shrink-0"
          onClick={() => onDoctorClick?.(doctor.id)}
        >
          {/* 调试信息 - 开发时显示，生产环境可以注释掉 */}
          {process.env.NODE_ENV === 'development' && (
            <div className="absolute -top-8 left-0 text-xs text-red-500 bg-yellow-100 p-1 rounded z-10">
              Avatar: {doctor.avatar || 'null'}
              <br />
              Has Avatar: {doctor.avatar ? 'true' : 'false'}
              <br />
              Avatar Length: {doctor.avatar ? doctor.avatar.length : 0}
            </div>
          )}
          
          {/* 强制显示头像图片进行测试 */}
          {doctor.avatar && (
            <img 
              src={doctor.avatar} 
              alt={`${doctor.name}的头像`}
              className="w-16 h-16 rounded-full object-cover shadow-md"
              style={{ display: 'block', position: 'relative', zIndex: 10 }}
              onError={(e) => {
                console.error('头像加载失败:', doctor.avatar, e);
                // 如果头像加载失败，隐藏图片，显示文字头像
                const target = e.target as HTMLImageElement;
                target.style.display = 'none';
                const textAvatar = target.nextElementSibling as HTMLElement;
                if (textAvatar) {
                  textAvatar.style.display = 'flex';
                }
              }}
              onLoad={(e) => {
                // console.log('头像加载成功:', doctor.avatar);
                // 头像加载成功后，隐藏文字头像
                const textAvatar = e.target.nextElementSibling as HTMLElement;
                if (textAvatar) {
                  textAvatar.style.display = 'none';
                }
              }}
            />
          )}
          
          {/* 测试：强制显示一个测试头像 */}
          <div className="absolute -top-20 left-0 text-xs">
            <img 
              src="https://robohash.org/test?set=set1" 
              alt="测试头像"
              className="w-8 h-8 rounded-full border border-red-500"
            />
          </div>
          
          {/* 文字头像 - 当没有头像或头像加载失败时显示 */}
          <div 
            className="w-16 h-16 rounded-full bg-gradient-to-br from-primary-400 to-primary-600 flex items-center justify-center shadow-md"
            style={{ 
              display: doctor.avatar ? 'none' : 'flex',
              position: 'relative',
              zIndex: 5
            }}
          >
            <span className="text-lg font-semibold text-white">
              {doctor.name.charAt(0)}
            </span>
          </div>
          
          {doctor.isOnline && (
            <div className="absolute -bottom-1 -right-1">
              <div className="w-4 h-4 bg-green-500 rounded-full border-2 border-white shadow-sm"></div>
            </div>
          )}
        </div>

        {/* 医生信息 */}
        <div className="flex-1 min-w-0">
          <div 
            className="flex items-center space-x-2 mb-2 cursor-pointer"
            onClick={() => onDoctorClick?.(doctor.id)}
          >
            <h3 className="text-base font-semibold text-gray-900 truncate">
              {doctor.name} {doctor.title}
            </h3>
            {isFollowed && (
              <span className="px-2 py-0.5 bg-red-100 text-red-700 text-xs rounded-full font-medium flex-shrink-0 flex items-center gap-1">
                <Heart size={10} fill="currentColor" />
                已关注
              </span>
            )}
            {doctor.isGradeA && (
              <span className="px-2 py-0.5 bg-green-100 text-green-700 text-xs rounded-full font-medium flex-shrink-0">
                三甲
              </span>
            )}
          </div>
          
          <p 
            className="text-sm text-gray-600 mb-3 cursor-pointer truncate"
            onClick={() => onDoctorClick?.(doctor.id)}
          >
            {doctor.hospital} {doctor.department}
          </p>

          {/* 咨询方式 */}
          <div className="flex flex-wrap gap-2 mb-3">
            {doctor.consultationMethods.map((method) => {
              const IconComponent = consultationIconMap[method];
              return (
                <span
                  key={method}
                  className="px-3 py-1 border border-primary-200 text-primary-600 text-xs rounded-full bg-primary-50 font-medium flex items-center gap-1"
                >
                  <IconComponent size={12} />
                  {method}
                </span>
              );
            })}
          </div>

          {/* 擅长领域 */}
          <div className="mb-3">
            <p className="text-sm text-gray-700 line-clamp-2 leading-relaxed">
              擅长：{doctor.specialties}
            </p>
            <button className="text-primary-600 text-xs mt-1 hover:text-primary-700 transition-colors">
              <ChevronDown size={12} />
            </button>
          </div>

          {/* 统计信息 */}
          <div className="flex items-center space-x-4 text-xs text-gray-500 mb-4">
            <span className="flex items-center gap-1">
              <span className="w-2 h-2 bg-green-400 rounded-full"></span>
              好评率{doctor.rating}%
            </span>
            <span className="flex items-center gap-1">
              <span className="w-2 h-2 bg-blue-400 rounded-full"></span>
              锦旗{doctor.commendations}
            </span>
            <span className="flex items-center gap-1">
              <span className="w-2 h-2 bg-purple-400 rounded-full"></span>
              浏览{doctor.views}
            </span>
          </div>

          {/* 价格和咨询按钮 */}
          <div className="flex items-center justify-between">
            <div className="flex items-baseline gap-1">
              <span className="text-lg font-bold text-red-500">¥{doctor.price}</span>
              <span className="text-sm text-gray-500">起</span>
            </div>
            <button
              onClick={() => onConsult(doctor.id)}
              className="px-6 py-2.5 bg-gradient-to-r from-primary-500 to-primary-600 text-white rounded-lg text-sm font-medium hover:from-primary-600 hover:to-primary-700 transition-all duration-200 shadow-md hover:shadow-lg transform hover:scale-105"
            >
              问医生
            </button>
          </div>
        </div>
      </div>
    </div>
  );
} 